<script setup lang="ts">
import { ref,reactive,onMounted } from 'vue';
import add from './components/add.vue';
import {get,del} from './http/index';
import { ElMessage } from 'element-plus';
const searchValue = ref('');
const enterSearch = async () => {
  await load();
}
const load = async () => {
  let data = (await get(searchValue.value)).data
  Object.assign(tableData,data);
}
onMounted(async ()=>{
  await load();
})
const openAdd = () => {
  isShow.value = true;
}

const tableData = reactive([]);
const info = reactive({})
const handleEdit = (index:number,row:any) => {
  Object.assign(info,row);
  isShow.value = true;
}
const handleDelete = async (index:number,row:any) => {
  let msg = (await del(row.id)).data;
  ElMessage.success(msg);
  await load();
}
const closeAdd = () =>{
  isShow.value = false;
  Object.assign(info,{})
}
const success = async (message:string) => {
  isShow.value = false;
  Object.assign(info,{});
  ElMessage.success(message)
  await load();
}
const isShow = ref(false);

</script>

<template>
  <div class="main">
    <el-row>
      <el-col :span="12">
        <el-input v-model="searchValue" placeholder="请输入要搜索的关键字" class="input-width-select" @keyup.enter="enterSearch"></el-input>
      </el-col>
      <el-col :span="12">
        <el-button type="primary" @click="load">查询</el-button>
        <el-button type="primary" @click="openAdd">新增</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width:100%">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="BookName" label="名称" width="180"></el-table-column>
      <el-table-column prop="Author" label="作者" width="180"></el-table-column>
      <el-table-column prop="TypeName" label="类别"></el-table-column>
      <el-table-column prop="Remarks" label="备注"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index,scope.row)">Edit</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index,scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <add :isShow="isShow" :info="info" @closeAdd="closeAdd" @success="success"></add>
</template>

<style scoped>
.main{
  width:60%;
  margin:100px auto;
}
.el-button{
  margin-left: 12px;
}
</style>
